<template>
  <div class="container">
    <div class="t-detail-container ">
      <!--导航-->
      <div class="current-page">
        <span>当前位置：</span>
        <router-link to="/">
          首页
        </router-link>
        <b>&gt;</b>
        <router-link :to="{ path: 'trademarklist', query: { trademarkName: keyword }}" class="current-title">
          商标查询
        </router-link>
        <b>&gt;</b>
        <a href="javascript:;" class="current-title current-active red">
          {{keyword}} </a>
      </div>
      <!--商标图片-->
      <div class="detail-img">
        <img v-if="isios != 'true'" :src="dataObj.picUrl+ '&default=tm_jishang.png'" alt=" ">
        <img v-if="isios == 'true'"  src="../../../static/img/sbjsw.jpg">
      </div>
      <!--商标基本信息-->
      <div class="basic-info mt-20">
        <h3>商标基本信息</h3>
        <ul class="info-list mt-20 mb-20">
          <li>
						<span class="b-left">
							注册号：
						</span>
            <span class="b-right red">
							{{dataObj.zch}}						</span>
          </li>
          <li>
						<span class="b-left">
							商标名称：
						</span>
            <span class="b-right">
							{{dataObj.sbmc}}  						</span>
          </li>
          <li>
						<span class="b-left">
							商标状态：
						</span>
            <span class="b-right">
							{{lclist}}						</span>
          </li>
          <li>
						<span class="b-left">
							国际分类：
						</span>
            <span class="b-right">
							第{{dataObj.gjfl}}类						</span>
          </li>
          <li>
						<span class="b-left">
							申请日期：
						</span>
            <span class="b-right">
							{{dataObj.sqrq}}						</span>
          </li>
          <li>
						<span class="b-left">
							注册日期：
						</span>
            <span class="b-right">
							 {{dataObj.zcggrq}}						</span>
          </li>
          <li>
						<span class="b-left">
							专用权期限：
						</span>
            <span class="b-right">
																		{{dataObj.zyqqx}}						</span>
          </li>
          <li>
						<span class="b-left">
							初审公告期号：
						</span>
            <span class="b-right">
							 {{dataObj.csggqh}} 						</span>
          </li>
          <li>
						<span class="b-left">
							注册公告期号：
						</span>
            <span class="b-right">
							{{dataObj.zcggqh}} 						</span>
          </li>
        </ul>
      </div>
      <!--申请人详情-->
      <div class="basic-info mt-20">
        <h3>申请人详情</h3>
        <ul class="info-list mt-20 mb-20">
          <li>
						<span class="b-left">
							申请人名称：
						</span>
            <span class="b-right">
							{{dataObj.sqrmcZw}}
						</span>
          </li>
          <li>
						<span class="b-left">
							申请人地址：
						</span>
            <span class="b-right">
							{{dataObj.sqrdzZw}}						</span>
          </li>
        </ul>
      </div>
      <!--代理机构详情-->
      <div class="basic-info mt-20">
        <h3>代理机构详情</h3>
        <ul class="info-list mt-20 mb-20">
          <li>
						<span class="b-left">
							代理机构名称：
						</span>
            <span class="b-right">
							{{dataObj.dlrmc}}						</span>
          </li>
        </ul>
      </div>
      <!--使用商品详细-->
      <div class="basic-info mt-20" style="margin-bottom: 1rem;">
        <h3>使用商品详细</h3>
        <ul class="info-list mt-20 mb-20">
          <li>
						<span class="b-left">
							类似群：
						</span>
            <span class="b-right">
							{{lsqh}}						</span>
          </li>
          <li>
						<span class="b-left">
							商品/服务列表：
						</span>
            <span class="b-right">
							{{splb}}</span>
          </li>
        </ul>
      </div>
    </div>
    <promotion-footer style="background-color: #f5f5f5;"></promotion-footer>
  </div>
</template>

<script>
  import PromotionFooter from '@/page/promotion/child/PromotionFooter'
  import API from '@/config/api';

  export default {
    components: {PromotionFooter},
    data() {
      return {
        keyword: '',
        dataObj: {},
        list: [],
        lclist: [],
        zch: '',
        gjfl: 0,
        token: '1212',
        lsqh: '',
        splb: '',
        isios: 'false'
      }
    },
    created(){
      this.isios = localStorage.getItem('isiOS');
    },
    methods: {
      getParams() {
        this.zch = this.$route.query.zch;
        this.gjfl = this.$route.query.gjfl;
        this.keyword = this.$route.query.keyword;
        this.$axios.post(API.getToken)
          .then((res) => {
            if (res.success) {

              this.token = res.data.token;
              this.$axios.get(API.searchDetail, {
                  token: this.token,
                  zch: this.zch,
                  gjfl: this.gjfl
                })
                .then((res) => {
                  this.dataObj = res.data;
                  var str = this.dataObj.sysp;
                  var str1 = str.substring(1, str.length - 1);

                  this.list = str1.split('][');
                  for (var i = 0; i < this.list.length; i++) {
                        var str = this.list[i].split('--');
                        this.lsqh += str[0]+' ';
                        this.splb += str[1];
                  }

                  var lc = this.dataObj.sblc;
                  var lc1 = lc.split('--->');
                  this.lclist = lc1[lc1.length-1];
                }).catch((err) => {
                layer.msg('服务器网络出现异常，请稍后再试！');
              });
            }
          });
      }
    },
    mounted() {
      this.getParams();
    }
  }
</script>

<style scoped>
  .container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 300px;
    background-color: #f5f5f5;
    padding-bottom: 1.1rem;
    z-index: 100002;
  }

  .t-detail-container {
    width: auto;
    padding: 0 0.2rem;
    background: #F5F5F5;
  }

  .current-page {
    width: auto;
    height: 0.64rem;
    line-height: 0.64rem;
    background: #F5F5F5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .detail-img {
    width: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    text-align: center;
    background: #FFFFFF;
    border: solid 1px #E6E6E6;
  }

  .basic-info {
    border: solid 1px #E6E6E6;
    background: #FFFFFF;
  }

  .current-page > a, .current-page span, .current-page b {
    font-size: 0.28rem;
    color: #666;
  }

  .container .current-active {
    color: #E23839;
  }

  body .red {
    color: #f00909;
  }

  .detail-img img {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    height: auto;
  }

  .basic-info h3 {
    height: 0.66rem;
    line-height: 0.66rem;
    text-align: left;
    font-size: 0.28rem;
    color: #333333;
    border-bottom: solid 1px #E23839;
    margin: 0 0.2rem;
  }

  .info-list {
    padding: 0 0.2rem;
  }

  .mb-20 {
    margin-bottom: 0.2rem;
  }

  .mt-20 {
    margin-top: 0.2rem;
  }

  .info-list li {
    line-height: 0.48rem;
  }

  .info-list li span {
    font-size: 0.24rem;
  }

  .b-left {
    width: 32%;
    display: inline-block;
    text-align: right;
    vertical-align: top;
    color: #666666;
  }

  .b-right {
    display: inline-block;
    width: 66%;
    word-wrap: break-word;
  }
</style>
